<script lang="ts" setup>
import PageDialog from "@/components/PageDialog/index.vue";
import {ref} from "vue";
import {SendRecordObj} from "@/api/demoClass";
import {
  addSendRecord,
} from "@/api/demoApi";
import {message} from "@/utils/message";
import {timeThan} from "@/utils/timeFormat";

defineOptions({
  name: "sendDialog"
});

/**-------------------表单相关-------------------**/
//表单参数
const formData = ref({
  id: null,
  meterId: null,
  meterNo: null,
  sendTime: null,
  eleType: null,
  eleValue: null,
  meterDegree:null,
  pueValue: null,
  status: 0
})

//表单校验
const formRules = ref({
  meterId: [{required:true,message:'请选择电表',trigger:['blur','change']}],
  sendTime: [
    {required:true,message:'请选择抄表日期',trigger:['blur','change']},
    {
      validator:(rule:any,value:any,cb:any)=>{
        timeThan(value,currentMeter.value.sendRecent ? currentMeter.value.sendRecent : currentMeter.value.initTime) ? cb(new Error('抄表日期不应早于上次抄表日期')) : cb()
      },
      trigger:['blur']
    }
  ],
  eleType: [{required:true,message:'请选择电流类型',trigger:['blur','change']}],
  eleValue: [{required:true,message:'请输入电流值',trigger:['blur','change']}],
  meterDegree: [
    {required:true,message:'请输入电表度数',trigger:['blur','change']},
    {
      validator:(rule:any,value:any,cb:any)=>{
        (Number(value) <= currentMeter.value.currentDegree) ? cb(new Error('抄表度数不应小于电表当前度数')) : cb()
      },
      trigger:['blur']
    }
  ],
})

const eleTypeOptions = [
  {label:'直流',value:0},
  {label:'交流',value:1},
]

/**-------------------打开弹框-------------------**/
//标题
const dialogTitle = ref('')
const dialog = ref()
const currentMeter = ref({})
//弹框显示
const dialogShow = (title: string,data?: object)=>{
  dialogTitle.value = title
  if(data) {
    formData.value.meterId = data.id
    formData.value.meterNo = data.meterNo
    currentMeter.value = {...data}
  }
  dialog.value.dialogVisible = true
}
defineExpose({
  dialogShow
})

/**-------------------事件回调-------------------**/
//取消
const form = ref()
const handlerCancel = ()=> new Promise(async (resolve,reject)=>{
  try{
    await form.value.resetFields()
    formData.value = {
      id: null,
      meterId: null,
      meterNo: null,
      sendTime: null,
      eleType: null,
      eleValue: null,
      meterDegree:null,
      pueValue: null,
      status: 0
    }
    dialog.value.dialogVisible = false
    resolve({})
  }catch(e){
    console.log(e)
    reject(e)
  }
})
//确认
const emits = defineEmits(['done'])
const handlerConfirm = ()=> new Promise(async (resolve,reject)=>{
  try{
    await form.value.validate()
    //todo 新增、编辑接口
    const newSendRecord = new SendRecordObj(formData.value)
    addSendRecord(newSendRecord)
    message("抄表成功", { type: "success" });
    await handlerCancel()
    emits('done')
    resolve({})
  }catch(e){
    reject(e)
  }
})
</script>

<template>
  <PageDialog ref="dialog" :handler-cancel="handlerCancel" :handler-confirm="handlerConfirm" :title="dialogTitle">
    <el-form ref="form" :model="formData" :rules="formRules" label-position="top" label-width="auto">
      <el-form-item label="电表号" prop="meterNo">
        <el-input v-model="formData.meterNo" clearable disabled placeholder="请选择电表" />
      </el-form-item>
      <el-form-item label="抄表日期" prop="sendTime">
        <el-date-picker
          v-model="formData.sendTime"
          clearable
          format="YYYY-MM-DD"
          placeholder="请选择抄表日期"
          type="date"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="电流类型" prop="eleType">
        <el-select v-model="formData.eleType" clearable filterable placeholder="请选择电流类型">
          <el-option v-for="(item,index) in eleTypeOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="电流值" prop="eleType">
        <el-input-number v-model.number="formData.eleValue" :controls="false" :precision="2" :step="0.01" placeholder="请输入电流值"/>
      </el-form-item>
      <el-form-item label="电表度数" prop="meterDegree">
        <el-input-number v-model.number="formData.meterDegree" :controls="false" :precision="2" :step="0.01" placeholder="请输入电表度数"/>
      </el-form-item>
      <el-form-item label="PUE值" prop="pueValue">
        <el-input-number v-model.number="formData.pueValue" :controls="false" :precision="2" :step="0.01" disabled placeholder="自动计算PUE值"/>
      </el-form-item>
    </el-form>
  </PageDialog>
</template>

<style lang="scss" scoped>
:deep(.el-form) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  .el-form-item {
    width: 48%;

    .el-input,
    .el-select,
    .el-input-number,
    .el-date-picker{
      width: 100%;
    }
  }
}
</style>
